<!--
 * @Description: Web project
 * @Version: 2.0
 * @Autor: WenChing
 * @Email: 2510129345@qq.com
 * @Date: 2020-08-03 17:29:50
 * @LastEditors: WenChing
 * @LastEditTime: 2020-08-11 18:22:33
-->
<template>
  <div>
    <login-top middleTop="登录哔哩哔哩">
       <div slot="right" style="font-size:3.611vw" @click="$router.push('/register')">注册</div>
    </login-top>

    <LoginText
      label="账号"
      placeholder="请输入账号"
      rule="^.{6,16}$"
      @inputChange="successIpt"
    ></LoginText>
    <LoginText
      style="margin:4.167vw 0"
      label="密码"
      type="password"
      placeholder="请输入密码"
      rule="^.{6,16}$"
      @inputChange="successIpt"
    ></LoginText>
    <LoginBtn
      btntext="登录"
      @registerSubmit="registerSubmit"
    ></LoginBtn>
  </div>
</template>

<script>
import LoginTop from "@/components/common/LoginTop";
import LoginText from "@/components/LoginText";
import LoginBtn from "@/components/common/LoginBtn";
export default {
  data() {
    return {
      username: "",
      password: ""
    };
  },
  components: {
    LoginTop,
    LoginText,
    LoginBtn
  },
  created() {},
  mounted() {},
  methods: {
    successIpt(res) {
      console.log(res);

      this.username = res;
      this.password = res;
      // 可以在组件中使用ES6箭头函数直接赋值
      //语法：  @inputChange="res => name =res"
    },

    //   async await 异步转为同步
    async registerSubmit() {
      let rulg = /^.{6,16}$/;
      //   当数据不为空时
      if (rulg.test(this.username) && rulg.test(this.password)) {
        const res = await this.$http
          .post("/login", {
            username: this.username,
            password: this.password
          })
          .then(res => {
            console.log(res);
            res.data.code == 302
              ? this.$msg.fail(res.data.msg)
              : this.$msg.success(res.data.msg);
          });
      } else {
        this.$msg.fail("格式不正确，请重新输出");
      }
    }
  }
};
</script>

<style scoped lang="less">
</style>
